<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
<link rel="stylesheet" href="/assets/css/mobile/index.css"/>
<link href="https://cdn.bootcss.com/Swiper/3.4.0/css/swiper.css" rel="stylesheet">
<@extends name="/mobile/project/topbar.ftl"/>
<div class="banner">
    <h1 class="clearfix">基于区块链的众筹平台</h1>
    <div class="search-bar">
        <input type="text" placeholder="输入关键词搜索项目" class="search-btn"/>
        <input type="button" value="搜索" class="click-btn"/>
    </div>
    <div class="top-search">
        <p>热门搜索:</p>
        <#list keyWordList as key>
            <a href="">${key.keyword}</a>
        </#list>
    </div>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img class="banner-img" src="/assets/img/mobileImg/index/banner.png" alt="">
            </div>
            <div class="swiper-slide">
                <img class="banner-img" src="/assets/img/mobileImg/index/banner.png" alt="">
            </div>
            <div class="swiper-slide">
                <img class="banner-img" src="/assets/img/mobileImg/index/banner.png" alt="">
            </div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
</div>
<div class="content">

</div>

<div class="mask">
    <div class="choose-method">
        <h1 class="clearfix">
            <img src="/assets/img/mobileImg/index/close.png" alt="" class="close">
        </h1>
        <h2 class="clearfix">
            <img src="/assets/img/mobileImg/index/logo.png" alt="">
        </h2>
        <div class="regLogin-btn">
            <a class="toreg-btn">注册</a>
            <a class="tologin-btn">登录</a>
        </div>
        <p class="line">
            <span>第三方登录</span>
        </p>
        <div class="methods">
            <dl class="method-item">
                <dd><img src="/assets/img/mobileImg/index/qq.png" alt=""></dd>
                <dt>QQ</dt>
            </dl>
            <dl class="method-item">
                <dd><img src="/assets/img/mobileImg/index/wx.png" alt=""></dd>
                <dt>微信</dt>
            </dl>
            <dl class="method-item">
                <dd><img src="/assets/img/mobileImg/index/sina.png" alt=""></dd>
                <dt>微博</dt>
            </dl>
        </div>
    </div>
    <div class="login">
        <h1>
            <span>账户登录</span>
            <img src="/assets/img/mobileImg/index/close.png" alt="" class="to-choose">
        </h1>
        <div class="input-img">
            <input type="text" class="text login-reg" placeholder="请输入手机号码">
            <img src="/assets/img/mobileImg/index/close-btn.png" alt="" class="close-btn">
        </div>
        <div class="input-img">
            <input type="password" class="password login-password" placeholder="请输入密码">
            <img src="/assets/img/mobileImg/index/look.png" alt="" class="look">
        </div>
        <p class="describe">登录即表示同意<em>《用户协议》</em></p>
        <p class="err-info"></p>
        <a class="login-btn">登录</a>
    </div>
    <div class="reg">
        <h1>
            <span>账户注册</span>
            <img src="/assets/img/mobileImg/index/close.png" alt="" class="to-choose">
        </h1>
        <div class="input-img">
            <input type="text" class="text reg-text" placeholder="请输入手机号码">
            <img src="/assets/img/mobileImg/index/close-btn.png" alt="" class="close-btn">
        </div>
        <div class="input-img">
            <input type="password" class="password reg-password" placeholder="请输入密码">
            <img src="/assets/img/mobileImg/index/look.png" alt="" class="look">
        </div>
        <div class="input-img">
            <input type="password" class="confirm" placeholder="请再次输入密码">
            <img src="/assets/img/mobileImg/index/look.png" alt="" class="look">
        </div>
        <div class="input-img">
            <input type="text" class="code" placeholder="请输入验证码">
            <input class="getCode" value="获取验证码" type="button">
        </div>
        <p class="describe">注册即表示同意<em>《用户协议》</em></p>
        <p class="reg-err"></p>
        <a class="reg-btn">注册</a>
    </div>
</div>

<script src="https://cdn.bootcss.com/Swiper/3.4.0/js/swiper.min.js"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/seajs/3.0.2/sea.js"></script>
<script src="/assets/script/mobile/index.js"></script>
<script src="/assets/script/mobile/topbar.js"></script>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
<script src="https://cdn.bootcss.com/handlebars.js/4.0.11/handlebars.js"></script>
<script type="text/template" id="myTemplate" src="/assets/script/center-template.js">
    {{#each data.collection}}
    <a href="/detail/{{id}}" class="content-item">
        <div class="con-item">
            <img src="/assets/img/mobileImg/index/project.png" class="project-img" alt="">
            <h2>{{title}}</h2>
            <p class="item-detail">{{introduce}}...</p>
            <div class="affiliation clearfix">
                <div class="affiliation-user">
                    <div class="portrait">
                        <img src="" alt="">
                    </div>
                    <p>{{linkmanName}}</p>
                </div>
                <div class="affiliation-location">
                    <img src="/assets/img/index/location.png" alt="">
                    <p>{{cityName}}</p>
                </div>
            </div>
        </div>
    </a>
    {{/each}}
</script>
<script>
    var tpl  =  $("#myTemplate").html();
    var template = Handlebars.compile(tpl);
        $.ajax({
   url:"/index.json",
   type:"get",
        data:{
            currentPage:1,
            pageSize:2
        },
    dataType:"json",
   success:function(data){
        console.log(data)
        console.log(i)
        var html = template(data);
        $('.content').append(html);
    },
    error: function(msg) {
        console.log(msg)
    }
})
    var i=3;
    $(window).scroll(function () {
    var scrollTop = $(this).scrollTop();
    var scrollHeight = $(document).height();
    var windowHeight = $(window).height();
    if(scrollTop+windowHeight==scrollHeight){
        $.ajax({
           url:"/index.json",
           type:"get",
                data:{
                    currentPage:i,
                    pageSize:1
                },
            dataType:"json",
           success:function(data){
                var arr = [];
                arr = data;
                var html = template(data);
                $('.content').append(html);
                   i = i+1;
            },
            error: function(msg) {
                console.log(msg)
            }
        })
    }

})

</script>
</html>